<template>
  <boadrContainerVue>
    <div class="board-box">
      <div style="width: 500px; height: 500px;" id="main"></div>
    </div>
  </boadrContainerVue>
</template>
<script lang="ts" setup>
import boadrContainerVue from '../compNew/boadrContainer.vue';
import { onMounted } from 'vue';
import * as echarts from 'echarts';

var myChart;
onMounted(() => {
  // 假设已经初始化了echarts实例
  myChart = echarts.init(document.getElementById('main'));

  // 饼图的配置项
  var option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [
          { value: 235, name: '视频广告' },
          { value: 274, name: '联盟广告' },
          { value: 310, name: '邮件营销' },
          { value: 335, name: '直接访问' },
          { value: 400, name: '搜索引擎' }
        ],
      }
    ]
  };

  // 应用配置项
  myChart.setOption(option);

  // 定义一个计数器和一个选中的数据索引
  var counter = 0;
  var selectedIndex = -1;

  // 设置定时器，每隔一定时间选中下一个数据项
  setInterval(function () {
    // 重置所有数据的选中状态
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    });

    // 选中当前索引的数据项
    counter++;
    var currentIndex = counter % option.series[0].data.length;
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });

    // 记录当前选中的索引
    selectedIndex = currentIndex;
  }, 1000);
})
</script>
<style lang="less" scoped>
.board-box {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 1vh;
  grid-column-gap: 1vh;
  overflow: hidden;
}
</style>
